import React from 'react' 
import ReactDOM from 'react-dom'    
import './css/Popup.css'
 import { Modal, Button } from 'antd';  
 import { DatePicker } from 'antd'; 
const { MonthPicker, RangePicker } = DatePicker;
import { Tree, Input } from 'antd';

import Tabs from '../../component/Tabs/Tabs' 


const TreeNode = Tree.TreeNode;
const Search = Input.Search;

const x = 3;
const y = 2;
const z = 1;
const gData = [];

const generateData = (_level, _preKey, _tns) => {
  const preKey = _preKey || '0';
  const tns = _tns || gData;

  const children = [];
  for (let i = 0; i < x; i++) {
    const key = `${preKey}-${i}`;
    tns.push({ title: key, key });
    if (i < y) {
      children.push(key);
    }
  }
  if (_level < 0) {
    return tns;
  }
  const level = _level - 1;
  children.forEach((key, index) => {
    tns[index].children = [];
    return generateData(level, key, tns[index].children);
  });
};
generateData(z);

const dataList = [];
const generateList = (data) => {
  for (let i = 0; i < data.length; i++) {
    const node = data[i];
    const key = node.key;
    dataList.push({ key, title: key });
    if (node.children) {
      generateList(node.children, node.key);
    }
  }
};
generateList(gData);

const getParentKey = (key, tree) => {
  let parentKey;
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i];
    if (node.children) {
      if (node.children.some(item => item.key === key)) {
        parentKey = node.key;
      } else if (getParentKey(key, node.children)) {
        parentKey = getParentKey(key, node.children);
      }
    }
  }
  return parentKey;
};


class Popup extends React.Component {
    constructor(props) {
        super(props)
        // this.state = { 
        //      visible: true,//弹窗的关闭打开
        // }
    }
    config={//相关配置
        title:'弹窗标题',
        visible:true,//弹窗的关闭打开
        nextTxt:'保存', 
        nextFn : () => {
            // this.setState({ loading: true });
            setTimeout(() => {
                this.config.visible =false 
            }, 3000);
        }, 
        otherText:'重置', 
        otherFn : () => {
            // this.setState({ visible: false });
            this.config.visible =false
        },
        tabsDatas : [
            {
                text: '关闭响应',
                value: 0
            },{
                text: '调整等级',
                value: 1
            } 
        ],
        tabsClick :(item, index) => {
            console.log(item, index);
        },
        tabsConfig : {
            // color: '#FFF',
            type: 'card'
        },
        tree:{
            name:'',
            data:[]
        },
        data:[
          {
              data:[
                    {
                        name:'调整级别',
                        type:'btn',
                        data:[{
                            name:'一级',
                            class:'active',
                        },{
                            name:'二级',
                            class:' ',
                        },{
                            name:'三级',
                            class:' ',
                        },{
                            name:'四级',
                            class:' ',
                        }]
                    },
                    {
                        name:'通知内容',
                        type:'input',
                        itemStyle:{width:'100%'}
                    },
                    {
                        name:'调整时间',
                        type:'singleTime',
                        dateFormat: 'YYYY-MM-DD HH:mm',
                        disabledSeconds:true,//禁用秒
                        // itemStyle:{width:'50%'},
                        timeChange:function(date, dateString) {
                            console.log(date, dateString);
                        },
                        getTime:function(value){
                             console.log('getTime: ', value);
                        }
                    },
                    {
                        name:'通知对象',
                        type:'custonLabel',//自定义的label
                        itemStyle:{width:'100%'},
                        btnTxt:'增加',
                        btnStyle:{    display:'inline-block',padding:'5px 10px',color:'red',backgroundColor:'#ddd',borderRadius:'3px',textAlign:'center'},
                        btnClick:function(){
                            console.log("s")
                        },
                        data:["s",'s','asd','asd']
                    }
              ]
          }
        ]
    }
    componentWillMount = () => {
        if(this.props.config !== undefined) this.config = Object.assign(this.config,this.props.config); 
    } 
    componentDidMount = () => {  } 
    saveClick = ( data) => {     } 
    state = {
        loading: false,
        // visible: true,//弹窗的关闭打开
    }
    showModal = () => {
        this.config.visible=true
    }


      state = {
    expandedKeys: [],
    searchValue: '',
    autoExpandParent: true,
  }
  onExpand = (expandedKeys) => {
    this.setState({
      expandedKeys,
      autoExpandParent: false,
    });
  }
  onChange = (e) => {
    const value = e.target.value;
    const expandedKeys = dataList.map((item) => {
      if (item.key.indexOf(value) > -1) {
        return getParentKey(item.key, gData);
      }
      return null;
    }).filter((item, i, self) => item && self.indexOf(item) === i);
    this.setState({
      expandedKeys,
      searchValue: value,
      autoExpandParent: true,
    });
  }

    render() {   
        const {  loading } = this.state;
        let  showData =this.config.data[0].data;
        let rightC='';
 
        let disabledSeconds =(s,h)=> { 
            return []
        }
        let allshow =(s,h)=> { 
            return []
        }
    



     const { searchValue, expandedKeys, autoExpandParent } = this.state;
    const loop = data => data.map((item) => {
      const index = item.key.indexOf(searchValue);
      const beforeStr = item.key.substr(0, index);
      const afterStr = item.key.substr(index + searchValue.length);
      const title = index > -1 ? (
        <span>
          {beforeStr}
          <span style={{ color: '#f50' }}>{searchValue}</span>
          {afterStr}
        </span>
      ) : <span>{item.key}</span>;
      if (item.children) {
        return (
          <TreeNode key={item.key} title={title}>
            {loop(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode key={item.key} title={title} />;
    });
        return (
           <div className='popup'>
                <Button type="primary" onClick={this.showModal}>
                Open
                </Button>
                <Modal
                    visible={this.config.visible}
                    title={this.config.title}
                    onOk={this.config.nextFn}
                    onCancel={this.config.otherFn}
                    footer={[
                        <Button key="back" size="large" onClick={this.config.otherFn}>{this.config.otherText}</Button>,
                        <Button key="submit" type="primary" size="large" loading={loading} onClick={this.config.nextFn}>
                        {this.config.nextTxt}
                        </Button>,
                    ]}
                >
                <Tabs dataSource={this.config.tabsDatas} onClick={this.config.tabsClick} config={this.config.tabsConfig} />
                <div className='main'>
                    <div className='leftWrap'>
                        { 
                           showData.map((item,i)=>{ 
                               switch(item.type){
                                    case 'btn':
                                        return(
                                            <div>
                                                <label for="">{item.name}</label>
                                                    <div className='rightC'>
                                                        {
                                                            item.data.map((jtem,j)=>{
                                                                return (
                                                                    <span className={jtem.class}>{jtem.name}</span>
                                                                )
                                                            })
                                                        }
                                                    </div>
                                                        
                                            </div>
                                        )
                                       break;
                                    case 'input':
                                            return(
                                                <div>
                                                    <label for="">{item.name}</label>
                                                        <div className='rightC'>
                                                             <input type="" name="" value="" style={item.itemStyle}/>
                                                        </div> 
                                                </div>
                                            )
                                     break;
                                    case 'singleTime':
                                           return(
                                                <div>
                                                    <label for="">{item.name}</label>
                                                        <div className='rightC'>
                                                          <DatePicker 
                                                            showTime
                                                            showToday
                                                            disabledSeconds={this.config.disabledSeconds?disabledSeconds:allshow} 
                                                            hideDisabledOptions 
                                                            format={item.dateFormat}  
                                                            onChange={item.timeChange} 
                                                            onOk={item.getTime}
                                                            /> 
                                                        </div> 
                                                </div>
                                            )
                                     break;
                                    case 'custonLabel':
                                         return(
                                            <div>
                                                <label for="">{item.name}</label>
                                                    <div className='rightC'>
                                                        <div>
                                                            { 
                                                                item.data.map((ktem,k)=>{
                                                                    return(
                                                                        <label >{ktem},</label>
                                                                    )
                                                                })
                                                            }
                                                        </div>
                                                        <div  style={item.btnStyle} onClick={item.btnClick}>
                                                            {item.btnTxt}
                                                        </div>
                                                    </div> 
                                            </div>
                                        )
                                    break;
                                     
                               }
                           
                           })
                        }
                    </div>
                    <div className='rightWrap'>
                         <Search style={{ marginBottom: 8 }}   onChange={this.onChange} />
                         <Tree
                            onExpand={this.onExpand}
                            expandedKeys={expandedKeys}
                            autoExpandParent={autoExpandParent}
                            >
                            {loop(gData)}
                        </Tree>
                    </div>
                </div>
                </Modal>
            </div>
        )
    }
}

export default Popup
